<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="div">1234</div>
    <script>
      function sleep(ms) { //延时作用 同步
        var start = new Date();
        while (new Date() - start <= ms) {}
      }

      //扩展知识，异步渲染，了解即可
      div = document.getElementById('div');
      console.log(1);
      p = new Promise(function (resolve, reject) {
        div.innerHTML = 'promise1';//同步 
        //这个时间点不渲染，主线程代码还没执行完
        //此时JS解析线程与渲染线程互斥，不再显示
        sleep(3000); //同步
        //3s后执行
        setTimeout(function () {
          div.innerHTML = 'timeout1';//微任务执行完后才会渲染，所以此行不会显示
          sleep(2000); //5s后执行
          resolve(); //7s后执行
        }, 2000);
        //3s后执行
        console.log("xxx"); 
      });
      // 7s后执行
      p.then(function () {
        div.innerHTML = 'then1'; //注释会显示timeout1
      });
      // 3s同步任务执行完之后显示promise1被global1覆盖,显示global1
      div.innerHTML = 'global1';//覆盖promise1，并显示
      // 然后再4s后,异步任务执行完,显示then1
    </script>
  </body>
</html>
